<!--公共头部-->
{template 'aitimt/common/header'}
<link rel="stylesheet" type="text/css" href="{$aideUrl}app/resource/aitimt/css/app.css" />
<link href="{$aideUrl}app/resource/aitimt/css/mui.picker.css" rel="stylesheet" />
<link href="{$aideUrl}app/resource/aitimt/css/mui.poppicker.css" rel="stylesheet" />
<script src="{$aideUrl}app/resource/aitimt/js/mui.picker.js"></script>
<script src="{$aideUrl}app/resource/aitimt/js/mui.poppicker.js"></script>
<script src="{$aideUrl}app/resource/aitimt/js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="{$aideUrl}app/resource/aitimt/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<style>
	* {touch-action: pan-y;}
	.mui-control-content .mui-loading {margin-top: 50px;}
	.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#ff9400;}
	.mui-table-view .mui-media-object{height: 75px;max-width: 130px;}
	.mui-bar-nav{position: absolute;background-color: #e94709;height: 3.3rem;}
	.top-return img{width: 70%;}
	.mui-bar-nav .mui-title{color: #FFFFFF;}
	.top-logo img{width: 90%;}
	.top-menu img{width: 70%;}
	.mui-bar-tab .mui-tab-item.mui-active{color: #ea4609;}
	/* 公共部分end */
	.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
	.mui-slider-indicator.mui-segmented-control .mui-control-item {line-height:30px;border-left:1px solid #c1c1c1 ;border-bottom:1px solid #c1c1c1 ;padding: 1px;color: #585858;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color: #585858;}
    .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: '';position: absolute;bottom: 0;height: 3px;width: 15%;display: -webkit-box;margin-left: 5%;background-color: #E94709;}

    .mui-h4, h4{font-size: 15px;margin: 5px 0;color: #000000;}
	.mui-slider .mui-slider-group .mui-slider-item img{width: 40%;height: 5rem;margin-top:10px;margin-left: 10px;}
	.field {background-color: #FFFFFF;display: inline-block;border-bottom: #EEEEEE 1px solid;}
	.field .event-content {float: right;width: 50%;padding-top: 10px;margin-right: 10px; font-size: 12px;}
	.field .event-content .event-no{font-size: 10px;margin: 0;padding: 0;}
	.field .event-content .event-price{font-size: 10px;}
	.field .event-content  .event-state-red{color: #e94709;}
	.field .event-content .event-state-green{color: #33c126;}
	.top-content{position: absolute;width: 100%;font-size:0.625rem;}
	.top-content img{width: 100%;}
	.mui-input-row{overflow: unset;top: 2px;left: 3%;}
	.mui-bar-nav~.mui-content{padding-top: 15%;}
	.mui-search input[type=search] {background-color: #f0774a;width: 85%;border-radius: 3.125rem;height:35px;color: #ffffff;}
    .mui-active::before{color: #FFFFFF;}
    .mui-table-view-cell>a:not(.mui-btn).mui-active{background: #e94709;color: white}
	.mui-search .mui-placeholder{line-height: 50px;font-size: 11px;width: 50%;color: #FFFFFF;}
	.mui-search .mui-placeholder .mui-icon{font-size: 17px;color: #fff;}
	.bottom-remind {width: 100%;text-align: center;padding-top: 30%;font-size: 25px;color: #969696;}
	.search-icon{line-height:10px;background-color: #fad6c8;position: absolute;top: 0.375rem;right: 13%;width: 15%;text-align: center;border: 0;height: 35px;color: #e94709;border-radius: 1.25rem;overflow: hidden;}
    .mui-backdrop{position: unset; background-color: rgba(0,0,0,0);}
    .mui-table-view-cell>a:not(.mui-btn){display: unset;padding: 5px;margin: 5px;}
    .mui-popover-arrow{height: 1px!important;}
    .hint{text-align: center;padding-top: 15%;font-size: 18px;}
    .mui-popover{top: 35px!important;font-size: 12px;width: 100%;}
    .mui-item{padding: 5px;margin: 5px;}
    .mui-table-view-cell{padding: 7px 15px;}
    .item-click{background: #E94709;color: white;border-radius: 5px;}
    .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border: 0;}
    .mui-input-row.mui-search .mui-icon-clear{display: none;}
</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
	<div class="top-content">
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" id="search" placeholder="输入赛事/类型/城市/状态">
			<button  type="button" class="search-icon" onclick="submit()">搜索</button>
		</div>
	</div>

</header>
<!-- 公共头部end -->
<div class="mui-content">
	<div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            {loop $item $i $j}
            <a class="mui-control-item" href="#popover{$i}" title="{$j}">{$j}</a>
            {/loop}
        </div>
        <div id="popovertime"  class="mui-popover">
            <ul class="mui-table-view" >
                <li class="mui-table-view-cell">
                    {loop $time $i $j}
                    <span class="mui-item" data-type="time" data-id="{$i}">{$j}</span>
                    {/loop}
                </li>
            </ul>
        </div>
        <div id="popovercity" class="mui-popover">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" >
                    {loop $city $i $j}
                    <span class="mui-item" data-value="{$i}">{$j}</span>
                    {/loop}
                </li>
                <div id="cityList" class="cityList">
                    <ul class="mui-table-view" id="recommend" style="display: none">
                        <li class="mui-table-view-cell" >
                            {loop $recommend $j}
                            <span class="mui-item" data-type="city" data-id="{$j}">{$j}</span>
                            {/loop}
                        </li>
                    </ul>
                    <ul class="mui-table-view" id="in" style="display: none;">
                        <li class="mui-table-view-cell" >
                            {loop $in $j}
                            <span class="mui-item" data-type="city" data-id="{$j}">{$j}</span>
                            {/loop}
                        </li>
                    </ul>
                    <ul class="mui-table-view" id="out" style="display: none">
                        <li class="mui-table-view-cell" >
                            {loop $out $j}
                            <span class="mui-item" data-type="city" data-id="{$j}">{$j}</span>
                            {/loop}
                        </li>
                    </ul>
                </div>

            </ul>

        </div>
        <div id="popovertype" class="mui-popover">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" >
                    <span class="mui-item" data-type="type" data-id="all">全部</span>
                    {loop $type $i $j}
                    <span class="mui-item" data-type="type" data-id="{$i}">{$j}</span>
                    {/loop}
                    <span class="mui-item" data-type="type" data-id="other">其他</span>
                </li>
            </ul>
        </div>
        <div id="popoverstatus" class="mui-popover">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" >
                    {loop $status $i $j}
                    <span class="mui-item" data-type="status" data-id="{$i}">{$j}</span>
                    {/loop}

                </li>
            </ul>
        </div>
        <div class="mui-slider-group" >
			<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
				<div class="mui-scroll-wrapper-ext">
					<div class="mui-scroll-ext">
						<div class="list-content" id="list-content" style="margin-bottom: 20%">
							{if empty($activityList[0])}
							<div class="bottom-remind">暂无活动</div>
							{/if}
							{loop $activityList $activity}
							<div class="field">
								<a href="{php echo app_url('home/index/detail').'&activityid='.$activity['id']}">
									<img src="{php echo tomedia($activity['thumb'])}">
								<div class="event-content">
									{php $timeStr=date("Y-m-d H:i:s",time());}
                                    {if ($activity['is_show']==0)}
                                    <span class="event-state-red">活动已下线</span>
									{elseif ($activity['endtime']<=$timeStr)}
									<span class="event-state-red">活动已结束</span>
                                    {elseif ($activity['joinetime']>$timeStr&&$activity['joinstime']<$timeStr)}
                                    <span class="event-state-green">活动报名中</span>
									{elseif ($activity['endtime']>$timeStr&&$activity['starttime']<$timeStr)}
									<span class="event-state-green">活动进行中</span>

									{/if}

									<h4 class="event-title">{$activity['title']}</h4>
									<p class="event-pro">报名费用:{if $activity['aprice']!=0}{$activity['aprice']}起{else}免费{/if}</p>
								</div>
								<p class=' mui-icon iconfont icon-didian' style="font-size: 10px;margin-left: 10px">{$activity['address']}</p>
								<p class=' mui-icon iconfont icon-riqi' style="font-size: 10px;margin-left: 10px">{$activity['starttime']}</p>
                                </a>

                            </div>
							{/loop}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 公共底部start -->
{template 'aitimt/common/nav'}
<!-- 公共底部end -->
<script type="text/javascript">
    function menu(search,value){
        var arr={search:search,value:value};
        getactivity(arr);
    }
    function choseCity(id){
        mui(".cityList ul").each(function () {
            this.style.display='none';
        });
        if (id=='all'){return false}
        var ul=document.getElementById(id);
        ul.style.display='block';

    }
    $(document).ready(function(){
    });
    $("input").focus(function(){
        $('#bar').css('display','none');
    });

    $("input").blur(function(){
        $('#bar').css('display','table');
    });
    $('.mui-table-view-cell').on('tap','span',function(){
        $(this).addClass('item-click').siblings().removeClass("item-click");
        if (localStorage.getItem('indicator')==1) {
            if ($(this).attr('data-value')!=undefined){
                choseCity($(this).attr('data-value'));
                return false;
            }
        }
        var text=$(this).text();
        mui(".mui-slider-indicator a").each(function (i,val) {
            if (i==localStorage.getItem('indicator')) {
                this.text=text;
            }
        });
        menu($(this).attr('data-type'),$(this).attr('data-id'));
    });
    mui('.mui-pop').on('tap','a',function(){
        document.location.href=this.href;
    });
    mui('.mui-popover').on('tap','ul',function(){
        if ($(this).parent().attr('id')=='popovercity'){return false}
        if ($(this).parent().attr('id')=='cityList'){
            $(this).parent().parent().parent().removeClass("mui-active");
            $(this).parent().parent().parent().css('display','none');
            return false
        }
        $(this).parent().removeClass("mui-active");
        $(this).parent().css('display','none');
    });
    mui('.mui-slider-indicator').on('tap','a',function(){
        localStorage.setItem('indicator-href',$(this).attr('title'));
        mui(".mui-slider-indicator a").each(function (i,val) {
            this.text=this.title;

            if (localStorage.getItem('indicator-href')==this.title){
                localStorage.setItem('indicator',i);
            }
        });
        if (this.text=='全部') {
            this.text=this.title;
        }else {
            this.text='全部';
        }
    });
    mui.init({
        swipeBack: false
    });
    mui('.mui-slider').slider().stopped = true;
    (function($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: true //是否显示滚动条
        });

        var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
                //force repaint
                sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
            }
        });
    })(mui);
    function submit() {
        var search=document.getElementById('search').value;
      console.log(search);
      if (!search){
          util.alert("没有搜索内容");
      }else{

      	var arr={search:'search',value:search}
          getactivity(arr);
      }
    }
    function getactivity(arr) {
        $.ajax({
            type: 'post',
            url: "{php echo app_url('home/index/search')}",
            data: arr,
            dataType: 'json',
            success: function(data){
                var result='',temp='';
				if (data[0]!=null){
                    for(var i = 0; i < data.length; i++){
                        var detail="{php echo app_url('home/index/detail')}"+'&activityid='+data[i].id;
                        if (data[i].is_show==0){
                            temp= '<span class="event-state-red">活动已下线</span>';
                        }else if (data[i].endtime<'{$timeStr}'){
                            temp= '<span class="event-state-red">活动已结束</span>';
                        }else if (data[i].joinetime>'{$timeStr}'&&data[i].joinstime<'{$timeStr}'){
 							 temp= '<span class="event-state-green">活动报名中</span>';
                      	}else if (data[i].endtime>'{$timeStr}'&&data[i].starttime<'{$timeStr}') {
                             temp = '<span class="event-state-green">活动进行中</span>';
                        }
                        result+='<div class="field">\n' +
                            '        <a href='+detail+'>\n' +
                            '         <img src='+"{$_W['attachurl']}"+data[i].thumb+'>\n' +
                            '        <div class="event-content">\n' +
                           						 temp +
                            '                  <h4 class="event-title">'+data[i].title+'</h4>\n' +
                            '         <p class="event-pro">报名费用:'+data[i].aprice+'起</p>\n' +
                            '        </div>\n' +
                            '        <p class=" mui-icon iconfont icon-didian" style="font-size: 10px;margin-left: 10px">'+data[i].address+'</p>\n' +
                            '        <p class=" mui-icon iconfont icon-riqi" style="font-size: 10px;margin-left: 10px">'+data[i].starttime+'</p>\n' +
                            '        </a>\n' +
                            '       </div>'
                    }
                    document.getElementById('list-content').innerHTML=result;
                }else {
                    result = '<div class="no-orders-at-all">'
                        +'<div class="head-block">'
                        +'    <div class="blank-icon mui-ext-icon mui-icon-mhuodong"></div>'
                        +'    <p class="hint">当前没有任何信息</p>'
                        +'    <p class="recommend-hint"></p>'
                        +'</div></div>';
                    document.getElementById('list-content').innerHTML=result;
                }
            },
            error: function(xhr, type){
                // alert('加载失败，请刷新下重试!');
                // 即使加载出错，也得重置
                console.log('加载失败')
            }
        });

    }

</script>

</body>
</html>
